<template>
    <div>
        <el-table
                :data="tableData"
                border
                style="width: 100%">
            <el-table-column
                    fixed
                    prop="bookID"
                    label="ID"
                    width="150">
            </el-table-column>
            <el-table-column
                    prop="bookName"
                    label="书名"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="bookCounts"
                    label="作者"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="detail"
                    label="详情"
                    width="120">
            </el-table-column>
            <el-table-column
                    fixed="right"
                    label="操作"
                    width="100">
                <template slot-scope="scope">
                    <el-button @click="edit(scope.row)" type="text" size="small">修改</el-button>
                    <el-button @click="delete1(scope.row)" type="text" size="small">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
                background
                layout="prev, pager, next"
                :page-size="6"
                :total="40"
                @current-change="page">
        </el-pagination>
    </div>

</template>

<script>
    export default {
        methods: {
            delete1(row){
                const _this = this;
                axios.delete('/book/delete/'+row.bookID)
                    .then(function (resp) {
                        if (resp.data=='success'){
                            _this.$alert('删除成功', '删除成功', {
                                confirmButtonText: '确定',
                                callback: action => {
                                    window.location.reload();
                                }
                            });
                        }
                    });
            },
            edit(row) {
                console.log(row);
                console.log(row.bookID);
                this.$router.push({
                    path: '/PageThree',
                    query: {
                        bookID: row.bookID
                    }
                });
            },
            page(currentPage){
                const _this = this;
                axios.get('/book/getBookList/'+currentPage+'/6').then(function (resp) {
                    _this.tableData = resp.data;
                    _this.total = resp.data.length;
                })
            }
        },
        created() {
            const _this = this;
            axios.get('/book/getBookList/1/6').then(function (resp) {
                _this.tableData = resp.data;
                _this.total = resp.data.length;
            })
        },

        data() {
            return {
                total: null,
                tableData: null
            }
        }
    }
</script>